<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>华猫商城</title>
		<style></style>
		<link href="../css/common.css" rel="stylesheet">
		<link href="../css/base.css" rel="stylesheet">
		<link rel="stylesheet" href="css/carts.css" />
		<style>
			body {
				background-color: #f5f5f5;
			}
			/*不显示搜索框*/
			.ZZHT-search-box{
				display: none;
			}
			#nav-header{
				margin: 0 auto;
				background: #fff;
			}

		</style>
	</head>

	<body>
		<div id="header"></div>
		<!--<div id="headerBox"></div>-->
		<!--<div id="nav_menu"></div>-->
		<div id="nav-header">
			<div class="show-box" style="width: 1200px;margin: 0 auto">
				<div class="main-head">
					<span class="cart-logo"></span>

				</div>
				<p class="my-cart"> 我的购物车</p>
				<div id="stepflex" class="stepflex">
					<dl class="first doing">
						<dt class="s-num s-num1"><span class="icon-flow first-flow"></span></dt>
						<dd class="s-text">我的购物车</dd>
						<dd></dd>
					</dl>
					<dl class="normal">
						<dt class="s-num1 s-num2"><span class="icon-flow second-flow-hover"></span></dt>
						<dd class="s-text1">填写核对订单信息</dd>
					</dl>
					<dl class="last">
						<dt class="s-num1 s-num3"><span class="icon-flow third-flow"></span></dt>
						<dd class="s-text1">成功提交订单</dd>
					</dl>

				</div>
				<div class="ZZHT-clear"></div>
			</div>

		</div>
		<!--<div class="black_line"></div>-->
		<div class="ZZHT-container">
			<!--<div class="main-head">-->
				<!--<img src="img/carta_03.png" alt="" />-->
			<!--</div>-->
			<!--<div id="stepflex" class="stepflex">-->
				<!--<dl class="first doing">-->
					<!--<dt class="s-num">1</dt>-->
					<!--<dd class="s-text">我的购物车</dd>-->
					<!--<dd></dd>-->
				<!--</dl>-->
				<!--<dl class="normal">-->
					<!--<dt class="s-num1">2</dt>-->
					<!--<dd class="s-text1">填写核对订单信息</dd>-->
				<!--</dl>-->
				<!--<dl class="last">-->
					<!--<dt class="s-num1 s-num3">3</dt>-->
					<!--<dd class="s-text1">成功提交订单</dd>-->
				<!--</dl>-->
				<!---->
			<!--</div>-->
			<!--<div class="ZZHT-clear"></div>-->
			<div class="cart-box">
				<div class="cart-head">
					<div class="chk"><input type="checkbox" onclick="checkChks(this,&quot;.j-chk&quot;)"><span class="clickAll">全选</span></div>
					<div class="goods">商品</div>
					<div class="price">单价</div>
					<div class="stock">库存</div>
					<div class="num">数量</div>
					<div class="t-price">总价</div>
					<div class="action">操作</div>
				</div>
				<div class="cart-item" v-for="(v,i) in cart">
					<div class="shop"><input type="radio"><span class="clickAll">{{v.shopName}}</span></div>
					<div class="goods-list" >
						<div class="item j-chk j-s481 j-g302" style="border-width: 0px 0px 1px; border-style: solid; border-color: rgb(238, 238, 238); border-image: initial;">
							<div class="chk"><input :id="'gchk_'+v.cartId" type="checkbox"  mval="9700.00" value="302" payscore="0" sval="90" allowbuy="10" class="j-chk j-s481 j-gchk" onclick="checkChks(this,&quot;.j-g302&quot;)" checked="checked"></div>
							<div class="goods" >
								<div class="img">
									<a  target="_blank">
										<img :src="imgUrlS+v.goodsImg" :title="v.goodsName" :alt="v.goodsName"  width="80" height="80" @click="go_detail(v.goodsId)" target="_blank">
									</a>
								</div>
								<div class="productDescribe">
									<div class="name" style="color: #333">{{v.goodsName}}</div>
									<!--//商品规格v2.00要求加上-->
									<div class="spec">
										{{ v.goodsSpecId}}
									</div>
								</div>

							</div>
							<div class="price">{{v.shopPrice}}</div>
							<div class="stock">{{v.goodsStock}}</div>
							<div class="num">
								<!--<a href="#none" class="buy-btn" :id="'buy-reduce_'+v.cartId" @click="changeIptNum(i,-1)">-</a>-->
								<!--<input type="text" :id="'buyNum_'+v.cartId" class="buy-num" v-model="v.cartNum" :value="v.cartNum" data-max="90" data-min="1" onkeyup="ZZHT.changeIptNum(0,&quot;#buyNum&quot;,&quot;#buy-reduce,#buy-add&quot;,302,&quot;statCartMoney&quot;)" autocomplete="off" onkeypress="return ZZHT.isNumberKey(event);" maxlength="6">-->
								<!--<a href="#none" class="buy-btn" :id="'buy-add_'+v.cartId" @click="changeIptNum(i,1)">+</a>-->
								<!--<div :id="'err_'+v.cartId" class="ZZHT-clear"></div>-->
								<span> x{{v.cartNum}} </span>
							</div>
							<div class="t-price">
								<span :id="'tprice_'+v.cartId" style="color: #ea5404;font-weight: bold;">¥{{v.shopPrice*v.cartNum}}</span>
							</div>
							<div class="action">
								<a href="#none" @click="remove(v.cartId)">删除</a>
							</div>
							<div class="ZZHT-clear"></div>
						</div>
					</div>
				</div>
				<!--<div class="cart-item">
					<div class="shop">
						<input type="checkbox" class="j-chk" onclick="checkChks(this,&quot;.j-s96&quot;)">上海硕渥实业有限公司 </div>
					<div class="goods-list">
						<div class="item j-chk  j-s96 j-g333" style="border-width: 0px 0px 1px; border-style: solid; border-color: rgb(238, 238, 238); border-image: initial;">
							<div class="chk"><input id="gchk_333" type="checkbox" mval="89.00" value="333" payscore="0" sval="5000" allowbuy="10" class="j-chk j-s96 j-gchk" onclick="checkChks(this,&quot;.j-g333&quot;)"></div>
							<div class="goods">
								<div class="img">
									<a href="" target="_blank">
										<img src="http://zzhtwl.oss-cn-qingdao.aliyuncs.com/goods/4831384f8852a3c5acfee2482b07a904.jpg" width="80" height="80" title="2018夏季男士短袖t恤 韩版圆领男式体恤打底衫半袖潮流男装学生上衣服">
									</a>
								</div>
								<div class="name">2018夏季男士短袖t恤 韩版圆领男式体恤打底衫半袖潮流男装学生上衣服</div>
								<div class="spec">
								</div>
							</div>
							<div class="price">¥89.00</div>
							<div class="stock">5000</div>
							<div class="num">
								<a href="#none" class="buy-btn" id="buy-reduce_333" onclick="javascript:ZZHT.changeIptNum(-1,&quot;#buyNum&quot;,&quot;#buy-reduce,#buy-add&quot;,333,&quot;statCartMoney&quot;)">-</a>
								<input type="text" id="buyNum_333" class="buy-num" value="2" data-max="5000" data-min="1" onkeyup="ZZHT.changeIptNum(0,&quot;#buyNum&quot;,&quot;#buy-reduce,#buy-add&quot;,333,&quot;statCartMoney&quot;)" autocomplete="off" onkeypress="return ZZHT.isNumberKey(event);" maxlength="6">
								<a href="#none" class="buy-btn" id="buy-add_333" onclick="javascript:ZZHT.changeIptNum(1,&quot;#buyNum&quot;,&quot;#buy-reduce,#buy-add&quot;,333,&quot;statCartMoney&quot;)">+</a>
								<div id="err_333" class="ZZHT-clear"></div>
							</div>
							<div class="t-price">¥
								<span id="tprice_333">178</span>
							</div>
							<div class="action">
								<a href="javascript:ZZHT.delCart(333)">删除</a>
							</div>
							<div class="ZZHT-clear"></div>
						</div>
					</div>
				</div>-->
				<div class="cart-footer selected2">
					<div class="cart-summary bz">
						<div class="lastCart">
							<a href="" style="margin-left: 20px">继续购物</a>
							<span class="small-line"></span>
							<a href="">删除</a>
						</div>

						<a href="#none" onclick="go_order()" class="ZZHT-next ZZHT-cart-reda">结算</a>
						<div class="fr cartFooter" >
							<!--<span style="line-height: 14px;"></span>-->
							<!---->
							<!---->
							<span style="color: #ea5404;">总计：¥</span> <span id="totalMoney" style="color: #ea5404;font-size: 18px;font-weight: bold">0元</span>
							<div id="totalScore">不含运费</div>
						</div>
						<div class="ZZHT-clear"></div>
					</div>
				</div>
				<!--<div class="cart-btn">
					<a href="/" class="ZZHT-contnue ZZHT-cart-asha">继续购物</a>
					<div class="ZZHT-clear"></div>
				</div>-->
			</div>
		</div>
		<div id="ck1"></div>
		<div id="ck3"></div>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/qrcode.js"></script>
		<script type="text/javascript" src="../plugin/layer/layer.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" src="../js/common_view.js"></script>
		<script type="text/javascript" src="../js/ljf_base.js"></script>
		<script type="text/javascript" src="js/carts.js"></script>
		
		<script src="../js/lxs_jk.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			if(!localStorage.userId){
				location.href="../view/login.html";
			}
			
			var vm = new Vue({//new 一个实例
				el: '.ZZHT-container',//作用域 父及的id 我这里放到了整个内容区
				data: {//数据源
					imgUrlS:imgUrlS,//图片基础路径 在ljf_base.js 里 所有页面应该都有配置
					cart:[]
				},
				methods:{
					go_detail:function(id){//方法 点击商品图片跳转到详情页同时把商品id传过去
						location.href="../view/detail.html?goodsId="+id;
					},
					go_shoplist:function(id){//点击跳转到店铺页
						location.href="../confirm/store.html?shopId="+id;
					},
					changeIptNum:function(i,num){
						if((num=='-1'&&this.cart[i].cartNum>1)||num==1){
							this.cart[i].cartNum+=num;
							Vue.nextTick(function(){
								total();
							})
						}
					},

					remove:function(id){
						$.ajax({//删除购物车商品
							type: "get",
							url: SURL + "sktCarts/delete",
							data:{
								sktCartsId: id,
							},
							success: function(data) {
								console.log(data);
								if(data.messageCode==200){
									window.location.reload();
								}else{
									layer.msg(data.message);
								}
								
							}
						});
					}
				}
			})
			
			$.ajax({//
				type: "get",
				url: SURL + "sktCarts/selectCartsByuserId",
				data:{
					userId: localStorage.userId,
				},
				success: function(data) {
					console.log(data);
					for(var i=0;i<data.entity.length;i++){
						vm.cart.push(data.entity[i])
					}
					Vue.nextTick(function(){
						total();
					})
				}
			});
			function go_order(){//结算 生成订单
				$.ajax({//
					type: "get",
					url: SURL + "sktCarts/cartsSettlement",
					data:{
						userId:localStorage.userId,
						goodsMoney:$('#totalMoney').html()
					},
					success: function(data) {
						console.log(data);
						if(data.messageCode==200){
							var orderId = data.entity.orderId;
							location.href="../confirm/qrdd.html?orderId="+orderId+'&money='+$('#totalMoney').html();
						}else{
							layer.msg(data.message);
						}
					}
				});
			}
		</script>
	</body>

</html>